<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p><input type="text" id="input"></p>
    <ul id="reUl">
       
    </ul>
</body>
</html>

<script>
    class Person{
        constructor(options){
            this.reInput = document.querySelector(options.reInput)
            this.reUl = document.querySelector(options.reUl)
            this.list = JSON.parse(localStorage.getItem('list')) || []
            this.add()
            this.auto()
            this.del()
        }
        add(){
            
            this.reInput.addEventListener('keyup',(e)=>{
               
                if(e.keyCode==13){
                    if(this.reInput.value==''){
                        return alert('内容不能为空')
                    }
                    let obj = {title:this.reInput.value,flag:false,edit:false}
                    this.list.push(obj)
                    this.setLocalStorage()
                    this.reInput.value=''
                    this.auto()
                }
            })
        }
        setLocalStorage(){
            localStorage.setItem('list',JSON.stringify(this.list))
        }
        auto(){
            let ing = ''
            this.list.forEach((item,key)=>{
                ing += ` <li><input type="checkbox"><span>${item.title}</span><button data-key="${key}">删除</button></li>`
            })
            this.reUl.innerHTML=ing
        }
        del(){
            this.reUl.addEventListener('click',(e)=>{
                let k = e.target.dataset.key
                if(e.target.localName=='button'){
                    this.list.splice(k,1)
                    this.setLocalStorage()
                    this.auto()
                }
            })
        }
    }
    new Person({
        reInput:'#input',
        reUl:"#reUl"
    })

   
</script>